<template>
  <div class="content">
    <div class="header">
      <div class="header_l"></div>
      <div class="header_m"></div>
      <div class="header_r">
        <div class="h-r-timer">
          <span>{{ timerInfo1 }}</span>
          <span>{{ timerInfo2 }}</span>
          <span>{{ timerInfo3 }}</span>
        </div>
      </div>
    </div>
    <div class="main">
      <!--  // 背景视频 -->
      <!-- <div class="bgVideo">
       <video autoplay loop muted playsinline>
         <source src="../../assets/img/bjviode.mp4" type="video/mp4">
       </video>
      </div> -->
      <!-- 左侧 -->
      <div class="main_l">
        <div class="item mainl1">
          <div class="bg">
            <span class="title">值班信息</span>
          </div>
          <div class="info">
            <div class="zb-l">
              <img src="../../assets/img/main/zbxx-tb.png" alt="" />
            </div>
            <div class="zb-r">
              <ul>
                <li v-for="(i, index) in 3" :key="index">
                  {{ Object.keys(dutyInfo)[i - 1] }}：{{
                    Object.values(dutyInfo)[i - 1]
                  }}
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="item mainl2">
          <div class="bg">
            <span class="title">巡更记录</span>
          </div>
          <div class="info">
            <!-- 以下四个顺序（安保-已完成-未完成；；消防-已完成-未完成） -->
            <div class="security" v-if="patrolInfo['保安']">
              <div class="txt">
                <span>安保巡更</span>
                <span>已完成</span>
              </div>
              <div class="progress-box">
                <span></span>
                <v-chart autoresize :option="stateData.option1"></v-chart>
                <span></span>
              </div>
            </div>
            <div class="security" v-else>
              <div class="txt">
                <span>安保巡更</span>
                <span class="error">未完成</span>
              </div>
              <div class="progress-box">
                <span class="errorbg"></span>
                <v-chart autoresize :option="stateData.option2"></v-chart>
                <span class="errorbg"></span>
              </div>
            </div>
            <div class="fireControl" v-if="patrolInfo['消防']">
              <div class="txt">
                <span>消防巡更</span>
                <span>已完成</span>
              </div>
              <div class="progress-box">
                <span></span>
                <v-chart autoresize :option="stateData.option1"></v-chart>
                <span></span>
              </div>
            </div>
            <div class="fireControl" v-else>
              <div class="txt">
                <span>消防巡更</span>
                <span class="error">未完成</span>
              </div>
              <div class="progress-box">
                <span class="errorbg"></span>
                <v-chart autoresize :option="stateData.option2"></v-chart>
                <span class="errorbg"></span>
              </div>
            </div>
          </div>
        </div>
        <div class="item mainl3">
          <div class="bg">
            <span class="title">门禁监控设备</span>
          </div>
          <div class="l3-echarts">
            <v-chart autoresize :option="stateData.option4"></v-chart>
          </div>
        </div>
        <div class="item mainl4 flex">
          <div class="bg">
            <span class="title">实时监控</span>
            <img class="detail" @click="handleActive('', 'detailFlag')" src="@/assets/img/main/detail.png" alt="" />
          </div>
          <div class="videoBox" v-for="(item, index) in 4" :key="index">
            <div class="video-title flex">{{ videoList[index]?.name }}</div>
            <div class="video-content">
              <video :id="'Video' + index" width="100%" height="100%" class="video-js vjs-default-skin vjs-big-play-centered" data-setup='{"controls": false, "autoplay": true, "muted": true, "loop": true, "preload": "auto"}' muted="muted">
                <!-- <source id="source" />
                <p class="vjs-no-js">
                  To view this video please enable JavaScript, and consider
                  upgrading to a web browser that
                  <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
                </p> -->
              </video>
            </div>
          </div>
        </div>
      </div>
      <!-- 中间 -->
      <div class="main_m">
        <div class="item mainr1 flex">
          <div class="top-title-box" :class="index == flagStr.top1Flag ? 'top-title-box-A' : ''" v-for="(item, index) in centerState.topTitle" :key="index" @click="handleActive(index, 'top1Flag', item)">
            {{ item.name }}
          </div>
        </div>
        <div class="item mainr2">
          <div class="peopleBox">
            <div class="titleName">今日在岗人数</div>
            <div class="titleNum">{{ dayNumber }}</div>
          </div>
          <div class="factoryBox">
            <div class="swiper-wrapper factory-border">
              <div class="swiper-slide factory-content">
                <img width="100" src="../../assets/img/main/mapOld.png" class="factory-img" alt="" />
                <!-- <div class="alarm-poupo yellow">
                  <div class="alarm-title">违规告警</div>
                  <div class="alarm-ts">
                    <div class="alarm-time">11:45:34</div>
                    <div class="alarm-status">未解决</div>
                  </div>
                </div>
                <div class="alarm-poupo red">
                  <div class="alarm-title">违规告警</div>
                  <div class="alarm-ts">
                    <div class="alarm-time">11:45:34</div>
                    <div class="alarm-status">未解决</div>
                  </div>
                </div>
                <div class="alarm-poupo orange">
                  <div class="alarm-title">违规告警</div>
                  <div class="alarm-ts">
                    <div class="alarm-time">11:45:34</div>
                    <div class="alarm-status">未解决</div>
                  </div>
                </div> -->
              </div>
              <div class="swiper-slide factory-content">
                <img width="100" src="../../assets/img/main/mapNew.png" class="factory-img" alt="" />
                <!-- <div class="alarm-poupo yellow">
                  <div class="alarm-title">违规告警</div>
                  <div class="alarm-ts">
                    <div class="alarm-time">11:45:34</div>
                    <div class="alarm-status">未解决</div>
                  </div>
                </div>
                <div class="alarm-poupo red">
                  <div class="alarm-title">违规告警</div>
                  <div class="alarm-ts">
                    <div class="alarm-time">11:45:34</div>
                    <div class="alarm-status">未解决</div>
                  </div>
                </div>
                <div class="alarm-poupo orange">
                  <div class="alarm-title">违规告警</div>
                  <div class="alarm-ts">
                    <div class="alarm-time">11:45:34</div>
                    <div class="alarm-status">未解决</div>
                  </div>
                </div> -->
              </div>
            </div>
          </div>
          <div class="switchBox">
            <div class="factorySwitch" :class="index == flagStr.top2Flag ? 'factorySwitch-A' : ''" v-for="(item, index) in centerState.factoryTitle" :key="index" @click="handleActive(index, 'top2Flag')">
              {{ item.name }}
            </div>
          </div>
        </div>
        <div class="item mainr3">
          <div class="car-school">
            <div class="car">
              <div class="bg">
                <span class="title">园区车位信息</span>
              </div>
              <div class="carBox">
                <div class="carTop">
                  <div class="carTop-l">
                    <img src="../../assets/img/main/car-b.png" alt="" class="imgLang" srcset="" />
                  </div>
                  <div class="carTop-r">
                    <div class="carTop-r-content flex">
                      <div class="title">车位总数</div>
                      <div class="num">{{ parkingLot.total }}</div>
                    </div>
                    <div class="carTop-r-bglang">
                      <img src="../../assets/img/main/carlang.png" alt="" class="imgLang" srcset="" />
                    </div>
                  </div>
                </div>
                <div class="carBottom flex">
                  <div class="carBottom-carTop-l flex">
                    <div class="carTop-l">
                      <img src="../../assets/img/main/car-g.png" alt="" class="imgLang" srcset="" />
                    </div>
                    <div class="carTop-r">
                      <div class="carTop-r-content flex">
                        <div class="title">可用车位</div>
                        <div class="num">{{ parkingLot.free }}</div>
                      </div>
                      <div class="carTop-r-bglang">
                        <img src="../../assets/img/main/carDuan.png" alt="" class="imgLang" srcset="" />
                      </div>
                    </div>
                  </div>
                  <div class="carBottom-carTop-l flex">
                    <div class="carTop-l">
                      <img src="../../assets/img/main/car-r.png" alt="" class="imgLang" srcset="" />
                    </div>
                    <div class="carTop-r">
                      <div class="carTop-r-content flex">
                        <div class="title">已用车位</div>
                        <div class="num">
                          {{ parkingLot.total - parkingLot.free }}
                        </div>
                      </div>
                      <div class="carTop-r-bglang">
                        <img src="../../assets/img/main/carDuan.png" alt="" class="imgLang" srcset="" />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="school">
              <div class="bg">
                <span class="title">会议室使用统计</span>
              </div>
              <div class="carBox">
                <div class="carTop">
                  <div class="carTop-l">
                    <img src="../../assets/img/main/schoolIcon.png" alt="" class="imgLang" srcset="" />
                  </div>
                  <div class="carTop-r">
                    <div class="carTop-r-content flex">
                      <div class="title">会议室总数</div>
                      <div class="num">{{ meetingroom.total }}</div>
                    </div>
                    <div class="carTop-r-bglang">
                      <img src="../../assets/img/main/carlang.png" alt="" class="imgLang" srcset="" />
                    </div>
                  </div>
                </div>
                <div class="carBottom" style="display: flex">
                  <div class="schoolLeft">
                    <div class="leftOne">
                      <img src="../../assets/img/main/school-g.png" class="school-g" alt="" />
                      <div class="text">空闲会议室</div>
                    </div>
                    <div class="leftOne">
                      <img src="../../assets/img/main/school-r.png" class="school-g" alt="" />
                      <div class="text">已用会议室</div>
                    </div>
                  </div>
                  <div class="schoolRight">
                    <div class="schoolRight-item" v-for="(item, index) in meetingroom.rooms" :key="index">
                      <!-- 未使用 -->
                      <img v-if="item.inuse == 0" src="../../assets/img/main/school-g.png" class="school-g" alt="" />
                      <!-- 使用中 -->
                      <img v-else src="../../assets/img/main/school-r.png" class="school-g" alt="" />
                      <div class="text">{{ item.name }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="item mainr4 flex">
          <img src="../../assets/img/main/right-icon.png" style="
              width: 5%;
              margin-right: 0.2rem;
              height: 129%;
              margin-top: -0.1rem;
            " alt="" srcset="" />

          <div class="mainr4-bottom" :class="index == flagStr.top3Flag ? 'mainr4-bottomA' : ''" v-for="(item, index) in centerState.bottomTitle" :key="index" @click="handleActive(index, 'top3Flag', item)">
            {{ item.name }}
          </div>
          <img src="../../assets/img/main/left-iocn.png" style="
              width: 5%;
              margin-left: 0.2rem;
              height: 129%;
              margin-top: -0.1rem;
            " alt="" srcset="" />
        </div>
      </div>
      <!-- 右侧 -->
      <div class="main_r">
        <div class="item mainr1">
          <div class="bg">
            <span class="title">访客信息</span>
          </div>
          <div class="info">
            <div class="timer-l">
              <span style="letter-spacing: 18px">{{
                ''.padStart(5 - visitorDay.toString().length, '0')
              }}</span>
              <CountUp :startVal="0" :endVal="visitorDay" :delay="27.5" :options="{ useGrouping: false }" />
            </div>
            <div class="timer-r">
              <span style="letter-spacing: 18px">{{
                ''.padStart(5 - visitorMonth.toString().length, '0')
              }}</span>
              <CountUp :startVal="0" :endVal="visitorMonth" :delay="27.5" :options="{ useGrouping: false }" />
            </div>
          </div>
        </div>
        <div class="item mainr2">
          <div class="bg">
            <span class="title">近七日园区在岗人数</span>
          </div>
          <div class="info">
            <v-chart autoresize :option="stateData.option3"></v-chart>
          </div>
        </div>
        <div class="item mainr3">
          <div class="bg">
            <span class="title">告警信息</span>
          </div>
          <div class="info">
            <div class="giveAnAlarm" v-for="(i, index) in imagesName" :key="index">
              <img :src="getAssetsFile(i.imgUrl)" alt="" />
              <div class="center">{{ i.txt }}</div>
              <div class="bottom">
                <span :class="index == 1 ? 'span2' : index == 2 ? 'span3' : ''">{{ i.count }}</span>
                <span :class="index == 1 ? 'span2-1' : index == 2 ? 'span3-1' : ''">
                  (个)</span>
              </div>
            </div>
          </div>
        </div>
        <div class="item mainr4">
          <div class="bg">
            <span class="title">智慧告警</span>
          </div>
          <div class="info">
            <ul class="tab-head">
              <li>告警类型</li>
              <li>告警位置</li>
              <li>告警内容</li>
              <li>告警时间</li>
              <li>告警详情</li>
            </ul>
            <div class="swiper tableBox">
              <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="(item, index) in leftSwiper1" :key="index" :class="(index + 1) % 2 == 0 ? 'slidA' : ''">
                  <div class="item">{{ item?.type }}</div>
                  <div class="item">{{ item?.position }}</div>
                  <div class="item">{{ item?.content }}</div>
                  <div class="item">{{ item?.time }}</div>
                  <div class="item">
                    <el-image style="width: 100%; height: 100%" :src="item?.image" :preview-src-list="[`${item?.image}`]" preview-teleported />
                  </div>
                </div>
                <!-- <div class="swiper-slide" v-for="(i, index) in 30" :key="index" :class="(index + 1) % 2 == 0 ? 'slidA' : ''">
                  <div class="item">{{ '工服检测' }}</div>
                  <div class="item">{{ '2车间7通道西向东' }}</div>
                  <div class="item">{{ '未穿工服' }}</div>
                  <div class="item">{{ '2024-10-09 14:51:25' }}</div>
                  <div class="item">
                    <el-image style="width: 100%; height: 100%" src="https://img0.baidu.com/it/u=2788455594,2081951872&fm=253&fmt=auto&app=138&f=JPEG?w=683&h=384" :preview-src-list="['https://img0.baidu.com/it/u=2788455594,2081951872&fm=253&fmt=auto&app=138&f=JPEG?w=683&h=384']" preview-teleported />
                  </div>
                </div> -->
              </div>
            </div>
          </div>
        </div>
        <div class="item mainr5">
          <div class="jumpTo" v-for="(i, index) in jumpTos" :key="index">
            <span :class="index == jumpToDefault ? 'active' : ''" @click="jumpTOFun(i, index)">{{ i.text }}</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 弹框 -->
    <div class="ifreamBox" v-if="flagStr.isOpen">
      <div class="item" @click.stop="false" v-if="flagStr.drawBox1Name === '动环系统'">
        <div class="title">
          <span>{{ flagStr.drawBox1Name }}</span>
          <div class="close" @click="flagStr.isOpen = false"></div>
        </div>
        <ul class="ifreamBox-content" v-if="flagStr.drawBox1Name === '动环系统'">
          <li>
            <img src="../../assets/img/main/one-icon1.png" class="content-img" alt="" srcset="" />
            <div class="content-txt">
              <div class="content-title">室内状态</div>
              <div class="content-item">
                <div class="content-item-wd">
                  温度：{{ dhssstatus.temperature }}
                </div>
                <div class="content-item-sd">
                  湿度：{{ dhssstatus.humidity }}
                </div>
              </div>
            </div>
          </li>
          <li>
            <img src="../../assets/img/main/one-icon2.png" class="content-img" alt="" srcset="" />
            <div class="content-txt">
              <div class="content-title">UPS状态</div>
              <div class="content-item">
                <div class="content-item-wd">{{ dhssstatus.ups }}</div>
                <!-- <div class="content-item-sd">湿度：65%</div> -->
              </div>
            </div>
          </li>
          <li>
            <div class="left-box">
              <img src="../../assets/img/main/one-icon4.png" class="content-img" alt="" srcset="" />
              <div class="content-txt">
                <div class="content-title">空调-#01</div>
                <div class="content-item">
                  <div class="content-item-wd">
                    <div class="isoff">
                      状态：{{ dhssstatus.aircondition1.running }}
                    </div>
                    <div class="iswd">
                      温度：{{ dhssstatus.aircondition1.temperature }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="right-box">
              <img src="../../assets/img/main/one-icon4.png" class="content-img" alt="" srcset="" />
              <div class="content-txt">
                <div class="content-title">空调-#02</div>
                <div class="content-item">
                  <div class="content-item-wd">
                    <div class="isoff">
                      状态：{{ dhssstatus.aircondition2.running }}
                    </div>
                    <div class="iswd">
                      温度：{{ dhssstatus.aircondition2.temperature }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="item content-sb" @click.stop="false" v-if="flagStr.drawBox1 && flagStr.drawBox1Name === '设备管理'">
        <div class="title">
          <span>{{ flagStr.drawBox1Name }}</span>
          <div class="close" @click="flagStr.isOpen = false"></div>
        </div>
        <ul class="ifreamBox-content ifreamBox2">
          <li v-for="(item, index) in serverstatus" :key="index">
            <div class="sb-title">{{ item.name }}</div>
            <serverstatu :item="item"></serverstatu>
            <!-- <div class="content2">
              <div class="c2-left">
                <div class="c2-left-title">
                  <img
                    v-if="item.type === 'tpu'"
                    class="c2-left-pu"
                    src="@/assets/img/main/tpu.png"
                    alt=""
                  />
                  <img
                    v-else
                    class="c2-left-pu"
                    src="@/assets/img/main/cpu.png"
                    alt=""
                  />
                  <span>{{ item.type.toUpperCase() }}使用率:</span>
                </div>
                <div class="c2-l-echart6">
                  <v-chart autoresize :option="stateData.option6"></v-chart>
                </div>
              </div>
              <div class="c2-right">
                <div class="r-top">
                  <div class="r-top-title">
                    <span>TPU内存使用率:</span>
                    <span>
                      <span class="num">55</span>
                      <span class="symbol">%</span>
                    </span>
                  </div>
                  <div class="c2-r-echart7">
                    <v-chart autoresize :option="stateData.option7"></v-chart>
                  </div>
                </div>
                <div class="r-bottom">
                  <div class="r-bottom-title">
                    <span>存储空间:&nbsp;</span>
                    <span>
                      <span class="num">55</span>
                      <span class="symbol">%</span>
                    </span>
                  </div>
                  <div class="r-b-echart5">
                    <v-chart autoresize :option="stateData.option5"></v-chart>
                  </div>
                  <div class="r-b-tip">
                    <span class="tip-name">已用存储/全部：</span>
                    <span>5.3/13GB</span>
                  </div>
                </div>
              </div>
            </div> -->
          </li>
        </ul>
      </div>
      <div class="item content-gj" v-if="flagStr.drawBox1 && flagStr.drawBox1Name === '告警处理'">
        <div class="title">
          <span>{{ flagStr.drawBox1Name }}</span>
          <div class="close" @click="flagStr.isOpen = false"></div>
        </div>
        <div class="querytmp">
          <div class="status">
            <div class="style-status">状态：</div>
            <el-select v-model="paramsTable.status" placeholder="请选择" style="width: 150px" @change="getStatusList">
              <el-option :key="0" label="全部" :value="0" />
              <el-option :key="1" label="已处理" :value="1" />
              <el-option :key="2" label="未处理" :value="2" />
            </el-select>
          </div>
          <div class="tims">
            <div class="style-time">时间：</div>
            <el-config-provider :locale="zhcn">
              <el-date-picker @change="getTimeList" v-model="paramsTable.month" format="YYYY-MM" value-format="YYYY-MM" type="month" placeholder="请选择筛选时间" />
            </el-config-provider>
          </div>
        </div>
        <div class="content">
          <ul class="tab-head">
            <li>告警类型</li>
            <li>告警地点</li>
            <li>告警内容</li>
            <li>告警时间</li>
            <li>状态</li>
            <li>详情</li>
            <li>操作</li>
          </ul>
          <div class="swiper tableBox3">
            <div class="swiper-wrapper">
              <div class="swiper-slide" v-for="(item, index) in alarmList" :key="index" :class="(index + 1) % 2 == 0 ? 'slidA' : ''">
                <div class="item">{{ item.type }}</div>
                <div class="item">{{ item.position }}</div>
                <div class="item">{{ item.content }}</div>
                <div class="item">{{ item.time }}</div>
                <div class="item">
                  {{ item.alarm_status == 1 ? '已处理' : '未处理' }}
                </div>

                <div class="item">
                  <el-image v-if="item.image" style="width: 100%; height: 100%" :src="item.image" :preview-src-list="[item.image]" preview-teleported />
                  <div class="" v-else>无</div>
                </div>
                <div class="item">
                  <!-- :class="item.alarm_status == 1 ? '' : 'buttonA'" -->
                  <div v-if="item.alarm_status != 1" class="button buttonA" @click="goHandle(item.id)">
                    <!-- {{ item.alarm_status == 1 ? '查看':'去处理' }} -->
                    去处理
                  </div>
                  <div v-else>无</div>
                </div>
              </div>
            </div>
          </div>
          <div class="operation">
            <div class="" style="width: 1.5rem"></div>
            <el-pagination size="small" layout="prev, pager, next" :total="totalNUm" :current-page="paramsTable.pageNum" :page-size="paramsTable.pageSize" @current-change="handleCurrentChange" />
            <span class="reportForm" @click="alarmsdload">告警报表</span>
          </div>
        </div>
      </div>
      <div class="item content-xf" v-if="flagStr.drawBox1 && flagStr.drawBox1Name === '消防点位'">
        <div class="title">
          <span>{{ flagStr.drawBox1Name }}</span>
          <div class="close" @click="flagStr.isOpen = false"></div>
        </div>
        <div class="content">
          <!-- 背景图 -->
          <img src="../../assets/img/main/xf-Bg.png" alt="" class="bgImg" srcset="" />
          <!-- <div class="iconBox"> -->
          <!-- 点位图 -->
          <img v-for="item in dianweiList" :key="item.id" src="../../assets/img/main/iconRed.png" alt="" srcset="" class="iconBox" :class="'iconBox'+item.point.id" @click="dianweiFun(item)">
          <!-- </div> -->
        </div>
        <div class="detail" v-show="flagStr.isDetail">
          <div class="detail-title">点位详情</div>
          <!-- 消防点位弹框信息 -->
          <div class="big-form">
            <div class="big-form-item">
              <span class="item-key">设备名称：</span>
              <span class="item-value">{{form.name}}</span>
            </div>
            <div class="big-form-item">
              <span class="item-key">设备位置：</span>
              <span class="item-value">{{form.position}}</span>
            </div>
            <div class="big-form-item">
              <span class="item-key">点位名称：</span>
              <span class="item-value">{{form.point.name}}</span>
            </div>
            <div class="big-form-item">
              <span class="item-key">告警时间：</span>
              <span class="item-value">{{form.time}}</span>
            </div>
            <div class="big-form-item">
              <span class="item-key">告警类型：</span>
              <span class="item-value">{{form.type}}</span>
            </div>
            <div class="big-form-item">
              <span class="item-key">告警内容：</span>
              <span class="item-value">{{form.content}}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="item video-box" @click.stop="false" v-show="flagStr.videoShow">
        <div class="video-title">
          <span>{{ '实时监控' }}</span>
          <div class="close" style="width: 40px; height: 40px" @click="flagStr.isOpen = false"></div>
        </div>
        <div class="video-content-box">
          <div class="videoBox" v-for="(item, index) in videosfour" :key="index">
            <div class="video-title flex">{{ item.name }}</div>
            <div class="video-content">
              <video :id="'Videoinside' + index" width="100%" height="100%" class="video-js vjs-default-skin vjs-big-play-centered" data-setup='{"controls": false, "autoplay": true, "muted": true, "loop": true, "preload": "auto"}' muted="muted">
                <!-- <source id="source" />
                <p class="vjs-no-js">
                  To view this video please enable JavaScript, and consider
                  upgrading to a web browser that
                  <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
                </p> -->
              </video>
            </div>
          </div>
          <div class="videoBtn">
            <div class="viobtn" v-for="(item, index) in Object.keys(videosinfo)" :key="index" :class="index === flagStr.selviobtn ? 'ateViobtn' : ''" @click="handleVideos(index, item)">
              {{ item }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ElMessage } from "element-plus";
import serverstatu from "./components/serverstatus.vue";
import zhcn from "element-plus/es/locale/lang/zh-cn";
import Home from "@/Hooks/Home";
import CountUp from "vue-countup-v3";
import Center from "@/Hooks/center";
import Swiper from "swiper"; // 引入库
import "swiper/css/swiper.css"; // 引入样式文件 注意5和6版本的样式文件不一致
import {
  videos,
  alarmcount,
  getPatrol, // 巡更记录
  getOnduty, // 今日在岗人数
  getOnduty7, // 一周在岗人数
  alarms,
  getduty,
  getVistorcount,
  getparking,
  getmeetingroom,
  getdevicestatus,
  getVideoS,
  getssstatus,
  getserverstatus,
  alarmpage,
  falarm,
  alarmHandled,
  getTodayalarmsdownload,
  getSubmodule,
} from "../../api/Home";
import { reactive, onMounted, ref, markRaw, nextTick } from "vue";
const { state } = Home();
const { centerState } = Center();
const form = ref({
  name: "",
  position: "",
  point: {
    id: null,
    name: "",
  },
  time: "",
  type: "",
  content: "",
});
const dianweiFun = (item) => {
  form.value = item;
  flagStr.isDetail = true;
};
const imagesName = reactive([
  {
    imgUrl: "right2-r.png",
    txt: "今日告警总数",
    count: 8,
  },
  {
    imgUrl: "right2-o.png",
    txt: "今日未处理告警",
    count: 3,
  },
  {
    imgUrl: "right2-g.png",
    txt: "今日已处理告警",
    count: 2,
  },
  {
    imgUrl: "right2-r.png",
    txt: "当月告警总数",
    count: 8,
  },
]);
const jumpToDefault = ref(0);
const jumpTos = reactive([
  {
    text: "安防综合管理平台",
    url: "https://10.32.131.100/",
  },
  {
    text: "AI报警管理",
    url: "http://10.32.131.112/",
  },
  {
    text: "智慧消防",
    url: "https://cloud.ff-iot.com:9146/web",
  },
  {
    text: "MES运营中心",
    url: "http://10.32.1.200:4000/dash/mes",
  },
  {
    text: "俞晶控制系统",
    url: "http://10.32.1.200:4000/dash/yj2",
  },
  {
    text: "会议预约系统",
    url: "http://10.32.200.250:9000/static/vue/admin/",
  },
]);
let dianweiList = reactive([]);
const jumpTOFun = (i, index) => {
  jumpToDefault.value = index;
  window.open(i.url);
};
const timerInfo1 = ref("");
const timerInfo2 = ref("");
const timerInfo3 = ref("");
onMounted(() => {
  getSubmoduleinfo();
  getVideoSinfo();
  getAlarms();
  getdutyInfo();
  getVistorcountInfo(1);
  getVistorcountInfo(2);
  getparkingInfo();
  getPatrolList();
  // getDayNumberNew();
  getDayNumberOld();
  getgetOnduty7Info1();
  getgetOnduty7Info2();
  getAlarmcount();
  getmeetingroomInfo();
  getVideos();
  getTimer();
  SwiperInit2();
  setInterval(() => {
    getTimer();
  }, 100);
  getdevicestatusInfo();
  refresh();
  getPoint();
});
const getPoint = () => {
  dianweiList = dianweiList.filter((item) => item.point.id !== 0);
  console.log(dianweiList, "dianweiList");
};
// 定时刷新任务
const refresh = () => {
  setInterval(() => {
    getdutyInfo();
  }, 3600000);
  setInterval(() => {
    getAlarmcount();
    getparkingInfo();
    getmeetingroomInfo();
    getdevicestatusInfo();
    getVistorcountInfo();
    getgetOnduty7Info1();
    getgetOnduty7Info2();
  }, 120000);
};
// 环形扇形图
const getdevicestatusInfo = async () => {
  const res = await getdevicestatus();
  if (res.data.code == 0) {
    const dataMsg = res.data.data;
    stateData.option4.title.text = `总设备数\n${dataMsg.total}`;
    stateData.option4.series[2].data[0].value = dataMsg.video;
    stateData.option4.series[2].data[1].value = dataMsg.videooff;
    stateData.option4.series[2].data[2].value = dataMsg.entrance;
    stateData.option4.series[2].data[3].value = dataMsg.entranceoff;
  }
};

// 一周在岗人数（老厂区）
const getgetOnduty7Info1 = async () => {
  const res = await getOnduty7(1);
  if (res.data.code == 0) {
    let dataList = res.data.data;
    let ydata = dataList.map((item) => item.count);
    stateData.option3.series[2].data = ydata;
    stateData.option3.series[3].data = ydata;
  }
};
// 去掉年份
function removeYearFromDateString(dateString) {
  const parts = dateString.split("-");
  return `${parts[1]}-${parts[2]}`;
}
// 一周在岗人数（新厂区）
const getgetOnduty7Info2 = async () => {
  const res = await getOnduty7(2);
  if (res.data.code == 0) {
    let dataList = res.data.data;
    let xName = dataList.map((item) => removeYearFromDateString(item._id));
    let ydata = dataList.map((item) => item.count);
    stateData.option3.xAxis[0].data = xName; // x轴日期数据
    stateData.option3.series[0].data = ydata;
    stateData.option3.series[1].data = ydata;
  }
};

// 告警信息
const getAlarmcount = async () => {
  const res = await alarmcount();
  if (res.data.code == 0) {
    // count 处理
    // handled 已解决
    const { today, month } = res.data.data;
    imagesName[0].count = today.count;
    imagesName[1].count = today.count - today.handled;
    imagesName[2].count = today.handled;
    imagesName[3].count = month.count;
  }
};
// 右侧轮播图
let leftSwiper1 = reactive([]);
const getAlarms = async () => {
  flagStr.mySwiper = null;
  // setTimeout(() => {
  //   leftSwiper1 = [
  //     {
  //       type: "工服检测",
  //       position: "2车间7通道西向东",
  //       time: "未穿工服",
  //       content: "2024-10-09 14:51:25",
  //       image: "",
  //     },
  //     {
  //       type: "工服检测999",
  //       position: "2车间7通道西向东",
  //       time: "未穿工服",
  //       content: "2024-10-09 14:51:25",
  //       image: "",
  //     },
  //     {
  //       type: "工服检测1",
  //       position: "2车间7通道西向东",
  //       time: "未穿工服",
  //       content: "2024-10-09 14:51:25",
  //       image: "",
  //     },
  //     {
  //       type: "工服检测2",
  //       position: "2车间7通道西向东",
  //       time: "未穿工服",
  //       content: "2024-10-09 14:51:25",
  //       image: "",
  //     },
  //     {
  //       type: "工服检测3",
  //       position: "2车间7通道西向东",
  //       time: "未穿工服",
  //       content: "2024-10-09 14:51:25",
  //       image: "",
  //     },
  //     {
  //       type: "工服检测4",
  //       position: "2车间7通道西向东",
  //       time: "未穿工服",
  //       content: "2024-10-09 14:51:25",
  //       image: "",
  //     },
  //   ];
  //   setTimeout(() => {
  //     SwiperInit();
  //   }, 1000);
  // }, 2000);
  const res = await alarms();
  if (res.data.code == 0) {
    leftSwiper1 = res.data.data.data;
    setTimeout(() => {
      SwiperInit();
    }, 1000);
  }
};
// 巡更记录
let patrolInfo = reactive({
  保安: true,
  消防: false,
});
const getPatrolList = async () => {
  const res = await getPatrol();
  if (res.data.code == 0) {
    patrolInfo = res.data.data;
  }
};
// 今日在岗人数
let dayNumber = ref(100);
// 新厂区在岗人数
const getDayNumberNew = async () => {
  const res = await getOnduty();
  if (res.data.code == 0) {
    dayNumber.value = res.data.data.newfactory;
  }
};
// 老厂区在岗人数
const getDayNumberOld = async () => {
  const res = await getOnduty();
  if (res.data.code == 0) {
    dayNumber.value = res.data.data.oldfactory;
  }
};
//
// 获取值班信息
let dutyInfo = reactive({
  安环值班领导: "王国强",
  中控室值班员: "王博",
  消防设施操作员: "马克宽",
});
const getdutyInfo = async () => {
  const res = await getduty();
  if (res.data.code == 0) {
    dutyInfo = res.data.data;
  }
};
// 获取访客数量 type 1-当月 2-当日
let visitorDay = ref(21);
let visitorMonth = ref(315);
const getVistorcountInfo = async (type) => {
  const res = await getVistorcount(type);
  if (res.data.code == 0) {
    let visitorPerson = res.data.data;
    if (type == 1) {
      visitorMonth.value = visitorPerson;
    } else {
      visitorDay.value = visitorPerson;
    }
  }
};
// 获取车位信息
let parkingLot = reactive({
  total: 120,
  free: 10,
});
const getparkingInfo = async () => {
  const res = await getparking();
  if (res.data.code == 0) {
    parkingLot = res.data.data;
  }
};
// 获取会议室信息
let meetingroom = reactive({
  total: 100,
  rooms: [],
});
const getmeetingroomInfo = async () => {
  const res = await getmeetingroom();
  if (res.data.code == 0) {
    const { total, rooms } = res.data.result;
    meetingroom.rooms = rooms.map((item) => {
      return {
        ...item,
        name: item.name.charAt(0),
      };
    });
    meetingroom.total = total;
  }
};
let stateData = reactive(state);
// 获取assets/IMAGE静态资源
const getAssetsFile = (url) => {
  return new URL(`../../assets/img/main/${url}`, import.meta.url).href;
};
const clickFun = (srcList, flag) => {
  window.open(flagStr[srcList][flagStr[flag]]);
};
let flagStr = reactive({
  mySwiper: null,
  mySwiper2: null,
  mySwiper3: null,
  slidClick: false,
  isOpen: false,
  videoShow: false,
  drawBox1: false,
  drawBox1Name: "告警处理",
  top1Flag: 0,
  top2Flag: 0,
  top3Flag: 0,
  selviobtn: 0,
  isDetail: false,
});
// Swiper - 智慧告警
const SwiperInit = () => {
  flagStr.mySwiper = new Swiper(".tableBox", {
    direction: "vertical",
    slidesPerView: 3, // 每页显示几个slide
    speed: 1000, // 速度
    mousewheel: true, // 鼠标滚轮控制
    observer: true,
    loop: true,
    autoplay: {
      delay: 2000, // 自动播放的间隔时间
      disableOnInteraction: false, // 用户操作后是否停止自动播放
    }, // observer: true, //修改swiper自己或子元素时，自动初始化swiper // observeParents: false, //修改swiper的父元素时，自动初始化swiper
  }); // 鼠标移入事件
  var swiperContainer = document.querySelector(".tableBox");
  swiperContainer.addEventListener("mouseenter", function () {
    flagStr.mySwiper.autoplay.stop(); // 鼠标移入时停止自动播放
  }); // 鼠标移出事件

  swiperContainer.addEventListener("mouseleave", function () {
    flagStr.mySwiper.autoplay.start(); // 鼠标移出时开始自动播放
  }); // 监听鼠标滚轮事件
};
// Swiper2 - 弹框表格
const SwiperInit3 = () => {
  flagStr.mySwiper3 = new Swiper(".tableBox3", {
    direction: "vertical",
    slidesPerView: 6, // 每页显示几个slide
    speed: 1000, // 速度
    mousewheel: true, // 鼠标滚轮控制
    observer: true,
    loop: true,
    autoplay: {
      delay: 2000, // 自动播放的间隔时间
      disableOnInteraction: false, // 用户操作后是否停止自动播放
    }, // observer: true, //修改swiper自己或子元素时，自动初始化swiper // observeParents: false, //修改swiper的父元素时，自动初始化swiper
  }); // 鼠标移入事件
  var swiperContainer = document.querySelector(".tableBox3");
  swiperContainer.addEventListener("mouseenter", function () {
    flagStr.mySwiper3.autoplay.stop(); // 鼠标移入时停止自动播放
  }); // 鼠标移出事件

  swiperContainer.addEventListener("mouseleave", function () {
    flagStr.mySwiper3.autoplay.start(); // 鼠标移出时开始自动播放
  }); // 监听鼠标滚轮事件
};
const SwiperInit2 = () => {
  flagStr.mySwiper2 = new Swiper(".factoryBox", {
    direction: "horizontal",
    speed: 2000, // 速度
    // mousewheel: true, // 鼠标滚轮控制
    // autoplay: {
    // delay: 10000, // 自动播放的间隔时间
    // disableOnInteraction: false, // 用户操作后是否停止自动播放
    // },
    loop: false,
    on: {
      slideChange: () => {
        if (flagStr.slidClick) return;
        const activeIndex = flagStr.mySwiper2?.activeIndex;
        if (activeIndex === 3) {
          flagStr.top2Flag = 0;
        } else if (activeIndex === 1 || activeIndex === 2) {
          flagStr.top2Flag = 1;
        } else {
          flagStr.top2Flag = 0;
        }
      },
    },
  }); // 鼠标移入事件
};
// 点击切换存index
const handleActive = (index, str, item) => {
  flagStr[str] = index;
  if (str == "top1Flag") {
    if (item.url) {
      if (index === 1) {
        window.open(
          item.url + `?token=${localStorage.getItem("itoken") || ""}`
        );
      } else {
        window.open(item.url);
      }
    }
  }
  if (str == "top2Flag") {
    flagStr.slidClick = true;
    if (index == 0) {
      // flagStr.mySwiper2?.slideTo(1)
      getDayNumberOld();
      flagStr.mySwiper2?.slideTo(0);
    } else if (index == 1) {
      getDayNumberNew();
      flagStr.mySwiper2?.slideTo(2);
    }
    nextTick(() => {
      flagStr.slidClick = false;
    });
  }
  if (str == "top3Flag") {
    if (!submodule.includes(item.name)) {
      ElMessage.error("暂无权限");
      return false;
    }
    flagStr.isOpen = true;
    if (index == 0) {
      getssstatusinfo();
      flagStr.drawBox1Name = "动环系统";
    } else if (index == 1) {
      getserverstatusinfo();
      flagStr.drawBox1Name = "设备管理";
    } else if (index == 2) {
      paramsTable.status = 2; // 未处理
      paramsTable.month = "";
      paramsTable.pageSize = 6;
      paramsTable.pageNum = 1;
      getAlarmpageinfo();
      flagStr.drawBox1Name = "告警处理";
    } else if (index == 3) {
      getFalarminfo();
      flagStr.isDetail = false;
      flagStr.drawBox1Name = "消防点位";
    }
    flagStr.drawBox1 = true;
    flagStr.videoShow = false;
  }
  if (str == "detailFlag") {
    // return;
    flagStr.isOpen = true;
    flagStr.drawBox1Name = "";
    flagStr.videoShow = true;
    flagStr.drawBox1 = false;
  }
};
let videoList = reactive([]);
const getVideos = async () => {
  const res = await videos();
  if (res.data.code == 0) {
    videoList = res.data.data;
    videoList.forEach((item, i) => {
      videoOne("Video" + i, item.url);
    });
  }
};
// 播放时间所使用的函数
const videoOne = (videoID, hslUrl) => {
  var src = hslUrl;
  var myVideo = videojs(videoID, {
    controls: true,
    autoplay: true,
    playToggle: true,
    preload: "auto",
    poster: "login.png", //未播放时的预览图片。
    width: 300,
    height: 200,
  });
  myVideo.src([
    { type: "application/x-mpegURL", src: src },
    //如果是mp4
    //{type: 'video/mp4', src:src }
  ]);
};

// 获取实时时间
const getTimer = () => {
  const now = new Date();
  const year = now.getFullYear();
  const month = padZero(now.getMonth() + 1); // 月份是从0开始的
  const day = padZero(now.getDate());
  const hours = padZero(now.getHours());
  const minutes = padZero(now.getMinutes());
  const seconds = padZero(now.getSeconds());
  const dayOfWeek = now.getDay();
  const dayNames = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
  const timerLe = `${year}-${month}-${day}`;
  const timerCe = `${dayNames[dayOfWeek]}`;
  const timerRi = ` ${hours}:${minutes}:${seconds}`;
  timerInfo1.value = timerLe;
  timerInfo2.value = timerCe;
  timerInfo3.value = timerRi;
};
const padZero = (number) => {
  return number < 10 ? "0" + number : number.toString();
};
// 视频弹框
let videosfour = reactive([]);
const handleVideos = (index, val) => {
  flagStr.selviobtn = index;
  videosfour = videosinfo[val];
  videosfour.forEach((item, i) => {
    videoOne("Videoinside" + i, item.url);
  });
};
let videosinfo = reactive({});
const getVideoSinfo = async () => {
  const res = await getVideoS();
  if (res.data.code == 0) {
    videosinfo = res.data.data;
    handleVideos(0, Object.keys(videosinfo)[0]);
    //const asd = videosinfo[Object.keys(videosinfo)[0]]
    //asd.forEach((item, i) => {
    //videoOne('Videoinside' + i, item.url)
    //})
  }
  // videosinfo = {
  //   长晶区域: [
  //     {
  //       name: '1车间7通道东向北',
  //       url: 'http://10.32.131.100:7086/live/cameraid/1000007%2435/substream/1.m3u8?token=1:gLBMaV0cOcrvIpKQTtYp36quUXxOPUK1',
  //     },
  //     {
  //       name: '2车间3平台球机东',
  //       url: 'http://10.32.131.100:7086/live/cameraid/1000007%248/substream/1.m3u8?token=1:gLBMaV0cOcrvIpKQTtYp36quUXxOPUK1',
  //     },
  //     {
  //       name: '1车间6通道球机东',
  //       url: 'http://10.32.131.100:7086/live/cameraid/1000007%245/substream/1.m3u8?token=1:gLBMaV0cOcrvIpKQTtYp36quUXxOPUK1',
  //     },
  //     {
  //       name: '2车间5通道东向西',
  //       url: 'http://10.32.131.100:7086/live/cameraid/1000007%2428/substream/1.m3u8?token=1:gLBMaV0cOcrvIpKQTtYp36quUXxOPUK1',
  //     },
  //   ],
  //   加工区域: [
  //     {
  //       name: '晶体掏棒区7',
  //       url: 'http://10.32.131.100:7086/live/cameraid/1000397%240/substream/1.m3u8?token=1:gLBMaV0cOcrvIpKQTtYp36quUXxOPUK1',
  //     },
  //     {
  //       name: '晶体磨削区1',
  //       url: 'http://10.32.131.100:7086/live/cameraid/1000404%240/substream/1.m3u8?token=1:gLBMaV0cOcrvIpKQTtYp36quUXxOPUK1',
  //     },
  //     {
  //       name: '晶体一楼磨削区3',
  //       url: 'http://10.32.131.100:7086/live/cameraid/1000399%240/substream/1.m3u8?token=1:gLBMaV0cOcrvIpKQTtYp36quUXxOPUK1',
  //     },
  //     {
  //       name: '晶体-2楼包装1',
  //       url: 'http://10.32.131.100:7086/live/cameraid/1000381%240/substream/1.m3u8?token=1:gLBMaV0cOcrvIpKQTtYp36quUXxOPUK1',
  //     },
  //   ],
  //   衬底区域: [
  //     {
  //       name: '衬底东倒角1',
  //       url: 'http://10.32.131.100:7086/live/cameraid/1000444%240/substream/1.m3u8?token=1:gLBMaV0cOcrvIpKQTtYp36quUXxOPUK1',
  //     },
  //     {
  //       name: '衬底东研磨7',
  //       url: 'http://10.32.131.100:7086/live/cameraid/1000454%240/substream/1.m3u8?token=1:gLBMaV0cOcrvIpKQTtYp36quUXxOPUK1',
  //     },
  //     {
  //       name: '衬底东千级1',
  //       url: 'http://10.32.131.100:7086/live/cameraid/1000465%240/substream/1.m3u8?token=1:gLBMaV0cOcrvIpKQTtYp36quUXxOPUK1',
  //     },
  //     {
  //       name: '衬底东百级1',
  //       url: 'http://10.32.131.100:7086/live/cameraid/1000468%240/substream/1.m3u8?token=1:gLBMaV0cOcrvIpKQTtYp36quUXxOPUK1',
  //     },
  //   ],
  // }

  handleVideos(0, Object.keys(videosinfo)[0]);
};
// 动环系统
let dhssstatus = reactive({});
const getssstatusinfo = async () => {
  const res = await getssstatus();
  if (res.data.code == 0) {
    dhssstatus = res.data.data;
  }
  // dhssstatus = {
  //   temperature: '21.23℃',
  //   humidity: '48.26%Rh',
  //   ups: '市电状态',
  //   aircondition1: {
  //     temperature: '21.4℃',
  //     running: '关机',
  //   },
  //   aircondition2: {
  //     temperature: '25.3℃',
  //     running: '开机',
  //   },
  // }
};

// 设备管理
let serverstatus = reactive([]);
const getserverstatusinfo = async () => {
  const res = await getserverstatus();
  if (res.data.code == 0) {
    serverstatus = res.data.data;
  }
  // serverstatus = [
  //   {
  //     name: 'AI盒子1',
  //     type: 'cpu', // cpu || tpu
  //     sphericalBody: '80', // 球状体
  //     usageRate: '10.61', // 使用率
  //     storageProportion: '20', // 存储空间占比
  //     storageSpace: '5.3', // 已用存储空间
  //     allSpaces: '13', // 全部空间
  //     storageUnit: 'GB', // 存储单位
  //   },
  //   {
  //     name: 'AI盒子2',
  //     type: 'tpu', // cpu || tpu
  //     sphericalBody: '56', // 球状体
  //     usageRate: '55', // 使用率
  //     storageProportion: '55', // 存储空间占比
  //     storageSpace: '6', // 已用存储空间
  //     allSpaces: '13', // 全部空间
  //     storageUnit: 'GB', // 存储单位
  //   },
  //   {
  //     name: 'AI盒子3',
  //     type: 'cpu', // cpu || tpu
  //     sphericalBody: '33', // 球状体
  //     usageRate: '10.65', // 使用率
  //     storageProportion: '50', // 存储空间占比
  //     storageSpace: '8.0', // 已用存储空间
  //     allSpaces: '13', // 全部空间
  //     storageUnit: 'GB', // 存储单位
  //   },
  //   {
  //     name: 'AI盒子4',
  //     type: 'tpu', // cpu || tpu
  //     sphericalBody: '30', // 球状体
  //     usageRate: '5', // 使用率
  //     storageProportion: '62', // 存储空间占比
  //     storageSpace: '6.3', // 已用存储空间
  //     allSpaces: '13', // 全部空间
  //     storageUnit: 'GB', // 存储单位
  //   },
  // ]
};
// 告警信息弹框
let paramsTable = reactive({
  status: 2,
  month: "",
  pageSize: 6, // -分页大小
  pageNum: 1, // -第几页
}); // 查询参数-date
let totalNUm = ref(12);
// 设备管理
let alarmList = reactive([]);
const getAlarmpageinfo = async () => {
  const res = await alarmpage(paramsTable);
  if (res.data.code == 0) {
    alarmList = res.data.data.data;
    totalNUm.value = res.data.data.total;
  }
};
// 消防点位接口
const getFalarminfo = async () => {
  const res = await falarm(paramsTable);
  if (res.data.code == 0) {
    dianweiList = res.data.data;
  }
};
// 切换页码
const handleCurrentChange = (page) => {
  paramsTable.pageNum = page;
  getAlarmpageinfo();
};
// 切换状态
const getStatusList = (e) => {
  paramsTable.status = e;
  paramsTable.pageNum = 1;
  getAlarmpageinfo();
};
// 切换日期
const getTimeList = (e) => {
  paramsTable.month = e;
  paramsTable.pageNum = 1;
  getAlarmpageinfo();
};
// 去处理
const goHandle = async (id) => {
  const res = await alarmHandled({ id });
  if (res.data.code == 0) {
    paramsTable.status = 2;
    paramsTable.month = "";
    paramsTable.pageSize = 6;
    paramsTable.pageNum = 1;
    getAlarmpageinfo();
    ElMessage.success("成功");
  }
};
// 下载报表
const alarmsdload = async () => {
  const res = await getTodayalarmsdownload();
  downLoad(res.data, "告警报表");
};
// 封装下载
const downLoad = (content, fileName) => {
  const blob = new Blob([content]);
  if ("download" in document.createElement("a")) {
    const elink = document.createElement("a");
    elink.download = `${fileName}.xlsx`;
    elink.style.display = "none";
    elink.href = URL.createObjectURL(blob);
    document.body.appendChild(elink);
    elink.click();
    URL.revokeObjectURL(elink.href);
    document.body.removeChild(elink);
  } else {
    navigator.msSaveBlob(blob, `${fileName}.xlsx`);
  }
};
// 获取权限
let submodule = reactive([]);
const getSubmoduleinfo = async () => {
  const res = await getSubmodule();
  if (res.data.code == 0) {
    submodule = res.data.data;
  }
  // submodule = ['动环系统', '设备管理', '告警处理']
};
</script>

<style lang="scss" scoped>
@import "@/assets/tea.scss";
@import "@/assets/sit.scss";
@import "@/assets/center.scss";

::v-deep .el-pager > li {
  background: transparent !important;
  color: #fff !important;
}
::v-deep .el-pager li.is-active {
  color: blue !important;
}

::v-deep .is-first {
  background: transparent !important;
  color: #fff !important;
}
::v-deep .is-last {
  background: transparent !important;
  color: #fff !important;
}
// ::v-deep .el-date-editor {
//   background: transparent !important;
//   box-shadow: 0 0 0 1px #004bb7 inset;
// }
::v-deep .el-date-editor.el-input {
  height: 24px;
}
::v-deep .el-range-input {
  color: #a8abb2;
}
::v-deep .el-range-separator {
  color: #a8abb2;
}
::v-deep .el-config-provider {
  width: 100%;
}
::v-deep .el-select__wrapper {
  width: 100%;
  font-size: 12px;
  padding: 2px 12px;
  min-height: 24px;
  line-height: 24px;
  background: transparent !important;
  box-shadow: 0 0 0 1px #004bb7 inset;
}
::v-deep .el-input__wrapper {
  width: 100%;
  font-size: 12px;
  padding: 2px 12px;
  min-height: 24px;
  line-height: 24px;
  background: transparent !important;
  box-shadow: 0 0 0 1px #004bb7 inset;
}
::v-deep .el-select__selected-item {
  color: #a8abb2;
}

::v-deep .el-select__placeholder {
  // color: #a8abb2;
}
</style>
